<template>
     <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="Approved by">
      <el-input v-model="formInline.user" placeholder="Approved by" clearable />
    </el-form-item> 
     <el-form-item label="Approved by">
      <el-input v-model="formInline.user" placeholder="Approved by" clearable />
    </el-form-item>
    <el-form-item label="Activity zone">
      <el-select
        v-model="formInline.region"
        placeholder="Activity zone"
        clearable
      >
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
   
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Query</el-button>
    </el-form-item>
  </el-form>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    
    <el-form-item label="Activity zone">
      <el-select
        v-model="formInline.region"
        placeholder="Activity zone"
        clearable
      >
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="Activity time" style="width: 235px;">
      <el-date-picker
        v-model="formInline.date"
        type="date"
        placeholder="Pick a date"
        clearable
      />
    </el-form-item>
    <el-form-item label="Activity zone">
      <el-select
        v-model="formInline.region"
        placeholder="Activity zone"
        clearable
      >
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Query</el-button>
    </el-form-item>
  </el-form>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column label="Date" width="100">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <el-icon>
                        <timer />
                    </el-icon>
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="Date" width="100">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <el-icon>
                        <timer />
                    </el-icon>
                    <span style="margin-left: 10px">{{ scope.row.userName }}</span>
                </div>
            </template>
        </el-table-column>
 <el-table-column label="Date" width="100">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <el-icon>
                        <timer />
                    </el-icon>
                    <span style="margin-left: 10px">{{ scope.row.section }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="Date" width="100">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <el-icon>
                        <timer />
                    </el-icon>
                    <span style="margin-left: 10px">{{ scope.row.role }}</span>
                </div>
            </template>
        </el-table-column> <el-table-column label="Date" width="180">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <el-icon>
                        <timer />
                    </el-icon>
                    <span style="margin-left: 10px">{{ scope.row.role==0?'未上线':'已上线' }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="Date" width="100">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <el-icon>
                        <timer />
                    </el-icon>
                    <span style="margin-left: 10px">{{ scope.row.status }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="Operations">
            <template #default="scope">

                <el-button size="small" type="danger">
                  查看
                </el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup>
import { getUserListApi,delUserApi,userSearchApi,addUserApi,editItemApi } from '@/api/api'
import { ref } from 'vue';
const tableData = ref([])
getUserListApi().then(res => {
    console.log(res);
    tableData.value = res.data.data
})
import { reactive } from 'vue'

const formInline = reactive({
  user: '',
  region: '',
  date: '',
})

const onSubmit = () => {
  console.log('submit!')
}
</script>

<style lang="scss" scoped>
.demo-form-inline .el-input {
  --el-input-width: 140px;
}

.demo-form-inline .el-select {
  --el-select-width: 140px;
}
</style>